
<div id="PeopleTableContainer">
<form>
        Xem theo ngày: 
        <script>
            $(function() {
            $( "#datepicker" ).datepicker(); });
        </script>
        <input type="text" id="datepicker" name="Ngay" />
        
        <button type="submit" id="LoadRecordsButton">Load records</button>
    </form>
<div id="TableContainer"></div>
</div>
<div class="addRecord"></div>
<script type="text/javascript">

    $(document).ready(function() {

        //Prepare jTable
        $('#TableContainer').jtable({
            title: 'Danh sách chấm công',
            paging: true,
            pageSize: 15,
            pageSizeChangeArea: false,
            sorting: true,
            defaultSorting: 'MaChamCong DESC',
            actions: {
                listAction: '<?php echo base_url('nhanvien/chamcong/get_danh_sach_cham_cong'); ?>',
                
            },
            fields: {
                MaChamCong: {
                    key: true,
                    create: false,
                    edit: false,
                    list: false,
                    title: 'Mã Chấm Công',
                    width: '15%',
                },
                NgayLam: {
                    title: 'Ngày Làm',
                    width: '20%',
                    type: 'date'
                },
                GioVao: {
                    title: 'Giờ Vào',
                    width: '15%',
                    //type: 'time'
                },
                GioVe: {
                    title: 'Giờ Về',
                    width: '15%'

                },
                Cong: {
                    title: 'Công',
                    width: '20%'
                },             
            },
        });

        //Load person list from server
        
        $('#LoadRecordsButton').click(function (e) {
            e.preventDefault();
            $('#TableContainer').jtable('load', {
                Ngay: $('#datepicker').val()
            });
        });
 
        //Load all records when page is first shown
        $('#LoadRecordsButton').click();
        

    });



</script>